---
title: <OrganizationSwitcher />
---

The `<OrganizationSwitcher />` is a comprehensive component that provides organization and personal account switching functionality. It displays the currently active organization or personal account and allows users to switch between them, create new organizations, and manage their organization settings.

## Usage

```tsx
import { OrganizationSwitcher } from '@daveyplate/better-auth-ui'

export function Header() {
  return (
    <nav>
      <OrganizationSwitcher />
    </nav>
  )
}
```

## Features

- **Organization Selection**: Switch between different organizations
- **Personal Account**: Switch back to personal account
- **Create Organization**: Create new organizations directly from the switcher
- **Organization Settings**: Quick access to organization settings
- **Responsive Design**: Adapts to different screen sizes
- **Custom Trigger**: Use your own trigger element
- **Hide Personal Mode**: Option to enforce organization-only usage

## Reference

<AutoTypeTable path="../src/components/organization/organization-switcher.tsx" name="OrganizationSwitcherProps" />

## Examples

### Basic Usage

```tsx
<OrganizationSwitcher />
```

### With Custom Size

```tsx
<OrganizationSwitcher size="icon" />
```

### With Custom Alignment

```tsx
<OrganizationSwitcher align="start" />
```

### With Custom Trigger

```tsx
import { Button } from '@/components/ui/button'

<OrganizationSwitcher 
  trigger={
    <Button variant="outline">
      Switch Organization
    </Button>
  }
/>
```

### With onSetActive Callback

```tsx
<OrganizationSwitcher 
  onSetActive={(organizationId) => {
    console.log('Switched to:', organizationId)
  }}
/>
```

### With Custom Localization

```tsx
<OrganizationSwitcher 
  localization={{
    ORGANIZATION: "Team",
    CREATE_ORGANIZATION: "Create Team",
    PERSONAL_ACCOUNT: "Personal Workspace"
  }}
/>
```

### With Custom Class Names

```tsx
<OrganizationSwitcher 
  classNames={{
    trigger: {
      base: "bg-primary text-primary-foreground",
      avatar: {
        base: "size-8"
      }
    },
    content: {
      base: "w-80",
      menuItem: "gap-3"
    }
  }}
/>
```

### Hide Personal Account

For applications that require users to always work within an organization context, you can hide the personal account option:

```tsx
<OrganizationSwitcher hidePersonal />
```

When `hidePersonal` is set to `true`:
- The personal account option is removed from the dropdown
- If no organization is active, the first available organization is automatically selected
- Users cannot switch back to their personal account
- The switcher only shows and allows switching between organizations

## Behavior

- **Initial State**: Shows the active organization or personal account
- **Loading State**: Displays skeleton loader while fetching data
- **Empty State**: Shows "Sign In" option when not authenticated
- **Error Handling**: Displays toast notifications for errors
- **Automatic Updates**: Refreshes when organization changes

## Requirements

The `OrganizationSwitcher` requires the organization plugin to be configured in your auth client:

```tsx title="providers.tsx"
<AuthUIProvider
  authClient={authClient}
  organization={{
    logo: true,
    customRoles: [
      { role: "developer", label: "Developer" },
      { role: "viewer", label: "Viewer" }
    ]
  }}
>
  {children}
</AuthUIProvider>
``` 